import * as React from 'react';
import { StyleSheet, TextInput, View, Text, Button, Alert } from 'react-native';
import userLoginMsg from '../../hooks/userLoginMsg';

export default function Login({navigation}) {
    const userLoginGlo = userLoginMsg();
    const [userphone, onChangePhone] = React.useState(sessionStorage.getItem('userphone') || '');
    const [userCode, onChangeCode] = React.useState(sessionStorage.getItem('userCode') || '');
    const [timeNumber, onChangeTimeNumber] = React.useState(null);
    let timeOverNum = 0;
    const getRandom = (n:number) => {
        return (Math.random() + '').slice(2, 2 + n);
    };
    const onLogin = () => {
        if(!userphone || !userCode) {
            return;
        }
        
        sessionStorage.setItem('userphone', userphone);
        sessionStorage.setItem('userCode', userCode);
        alert('登录成功');
        navigation.replace('Root');
        //console.log(navigation);
        //console.log(navigation.navigate);
        //navigation.navigate('Example01');
    };
    const onRegister = () => {
        const val1 = getRandom(11);
        const val2 = getRandom(4);

        onChangePhone(val1);
        onChangeCode(val2);
    };
    console.log('userLoginGlo', userLoginGlo);
    const setTimeNumber = (num: number) => {

    };
    const getTimeNum = () => {
        if(timeOverNum > 0) {
            return;
        }
        timeOverNum = 4;
        onChangeTimeNumber(`(${timeOverNum})`);
        let timeIntervalId = setInterval(() => {
            timeOverNum = timeOverNum - 1;
            console.log('timeOverNum', timeOverNum);
            onChangeTimeNumber(`(${timeOverNum})`);
            if(timeOverNum == 0) {
                clearInterval(timeIntervalId);
                onChangeTimeNumber(null);
            }
        }, 1000)
    };

    return (
        <View style={styles.container}>
            <View style={styles.TextInputBox1}>
                <TextInput
                    style={styles.TextInput1}
                    placeholder='请输入手机号'
                    maxLength='11'
                    onChangeText={text => onChangePhone(text)}
                    value={userphone}
                />
            </View>
            <View style={styles.TextInputBox2}>
                <TextInput
                    style={styles.TextInput2}
                    placeholder='请输入4位数验证码'
                    maxLength='4'
                    onChangeText={text => onChangeCode(text)}
                    value={userCode}
                />
                <Text style={styles.TextCode2} onPress={getTimeNum}>获取验证码{timeNumber}</Text>
            </View>
            <View style={styles.TextInputBox1}>
                <Button
                    onPress={onLogin}
                    title="登录"
                />
            </View>
            <View style={styles.TextInputBox1}>
                <Button
                    onPress={onRegister}
                    title="一键注册"
                />
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        height: '100%',
        backgroundColor: '#FFF',
        paddingLeft: 20,
        paddingRight: 20,
        paddingTop: 20,
    },

    TextInputBox1: {
        marginBottom: 20,
    },
    TextInput1: {
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        paddingLeft: 10,
        paddingRight: 10,
    },

    TextInputBox2: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginBottom: 20,
    },
    TextInput2: {
        width: '60%',
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        paddingLeft: 10,
        paddingRight: 10,
    },
    TextCode2: {
        width: '30%',
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        lineHeight: 40,
        textAlign: 'center',
    },
    Button1: {
        color: '#841584',
    },
});
